import React, { FC, useState, useEffect } from 'react'
import { DownOutlined } from '@ant-design/icons'
import { Button, Col, Form, Input, Row, Select, theme, Space, Table, Tag } from 'antd'
import type { ColumnsType } from 'antd/es/table'
import qs from 'qs'
import moment from 'moment'
const { Option } = Select
const QualityList = () => {
  const { token } = theme.useToken()
  const [form] = Form.useForm()
  const [expand, setExpand] = useState(false)
  const [listData, setListData] = useState([])
  useEffect(() => {}, [])
  const handleSearch = (values: any) => {
    // 调用数据
    fetch(`/api/qmi/lst?${qs.stringify(values)}`, {
      method: 'get',
    })
      .then((response) => response.json())
      .then((res) => {
        if (res.code === 0 && res.info?.data) {
          const data = res.info.data
          setListData(data)
        }
      })
  }
  const columns: ColumnsType<any> = [
    {
      title: '日志事件ID',
      dataIndex: 'record_id',
      key: 'record_id',
      align: 'center',
    },
    {
      title: '记录时间',
      dataIndex: 'record_time',
      key: 'record_time',
      render: (value) => moment(value).format('YYYY-MM-DD HH:mm:ss'),
      sorter: (a, b) => {
        // 将日期转化成毫秒
        const t1 = new Date(a.record_time).getTime()
        const t2 = new Date(b.record_time).getTime()
        return t1 - t2
      },
      align: 'center',
    },
    {
      title: '请求长度',
      dataIndex: 'access_length',
      key: 'access_length',
      sorter: (a, b) => {
        const t1 = a.access_length
        const t2 = b.access_length
        return t1 - t2
      },
      align: 'center',
    },
    {
      title: '来源地址',
      dataIndex: 'access_addr',
      key: 'access_addr',
      align: 'center',
    },
    {
      title: '请求方法',
      dataIndex: 'access_method',
      key: 'access_method',
      align: 'center',
    },
    {
      title: '请求路径',
      dataIndex: 'access_path',
      key: 'access_path',
      align: 'center',
    },
    {
      title: '服务地址',
      dataIndex: 'backend_addr',
      key: 'backend_addr',
      align: 'center',
    },
    {
      title: '服务状态',
      dataIndex: 'backend_code',
      key: 'backend_code',
      align: 'center',
    },
    {
      title: '服务时长',
      dataIndex: 'backend_time',
      key: 'backend_time',
      align: 'center',
    },
    {
      title: '响应长度',
      dataIndex: 'return_length',
      key: 'return_length',
      sorter: (a, b) => {
        const t1 = a.return_length
        const t2 = b.return_length
        return t1 - t2
      },
      align: 'center',
    },
    {
      title: '响应状态',
      dataIndex: 'return_code',
      key: 'return_code',
      align: 'center',
    },
    {
      title: '响应时长',
      dataIndex: 'entire_time',
      key: 'entire_time',
      sorter: (a, b) => {
        const t1 = a.access_length
        const t2 = b.access_length
        return t1 - t2
      },
      align: 'center',
    },
    {
      title: '操作',
      key: '操作',
      fixed: 'right',
      render: (value) => <a href={`/dataDetail?logid=${value.record_id}`}>详情</a>,
      align: 'center',
    },
  ]
  return (
    <div className="dataListContainer">
      <Form form={form} name="data_list_search" onFinish={handleSearch}>
        <Row gutter={24}>
          <Col span={6}>
            <Form.Item name="size" label="页面行数" rules={[{ required: true, message: '请填写页面行数' }]}>
              <Input placeholder="页面行数" type="number" />
            </Form.Item>
          </Col>
          <Col span={6}>
            <Form.Item name="mirt" label="记录起始时间">
              <Input placeholder="记录起始时间" type="number" />
            </Form.Item>
          </Col>
          <Col span={6}>
            <Form.Item name="mibt" label="服务最小时长">
              <Input placeholder="服务最小时长" type="number" />
            </Form.Item>
          </Col>
          <Col span={6}>
            <Form.Item name="miet" label="全程最小时长">
              <Input placeholder="全程最小时长" type="number" />
            </Form.Item>
          </Col>
          <Col span={6}>
            <Form.Item name="page" label="查询页面" rules={[{ required: true, message: '请填写查询页面' }]}>
              <Input placeholder="查询页面" type="number" />
            </Form.Item>
          </Col>
          <Col span={6}>
            <Form.Item name="mart" label="记录结束时间">
              <Input placeholder="记录结束时间" type="number" />
            </Form.Item>
          </Col>
          <Col span={6}>
            <Form.Item name="mabt" label="服务最大时长">
              <Input placeholder="服务最大时长" type="number" />
            </Form.Item>
          </Col>
          <Col span={6}>
            <Form.Item name="maet" label="全程最大时长">
              <Input placeholder="全程最大时长" type="number" />
            </Form.Item>
          </Col>
          <Col span={6}>
            <Form.Item name="date" label="查询日期">
              <Input placeholder="查询日期" />
            </Form.Item>
          </Col>
          <Col span={6}>
            <Form.Item name="mial" label="请求最小长度">
              <Input placeholder="请求最小长度" type="number" />
            </Form.Item>
          </Col>
          <Col span={6}>
            <Form.Item name="mirl" label="响应最小长度">
              <Input placeholder="响应最小长度" type="number" />
            </Form.Item>
          </Col>
          <Col span={6}>
            <Form.Item name="sort" label="指定排序字段">
              <Input placeholder="指定排序字段" />
            </Form.Item>
          </Col>
          <Col span={6}>
            <Form.Item name="addr" label="来源地址">
              <Input placeholder="来源地址" />
            </Form.Item>
          </Col>
          <Col span={6}>
            <Form.Item name="maal" label="请求最大长度">
              <Input placeholder="请求最大长度" type="number" />
            </Form.Item>
          </Col>
          <Col span={6}>
            <Form.Item name="marl" label="响应最大长度">
              <Input placeholder="响应最大长度" type="number" />
            </Form.Item>
          </Col>
          <Col span={6}>
            <Form.Item name="order" label="指定升序降序">
              <Select
                placeholder="指定升序降序"
                options={[
                  {
                    value: 'asc',
                    label: '升序',
                  },
                  {
                    value: 'desc',
                    label: '降序',
                  },
                ]}
              />
            </Form.Item>
          </Col>
        </Row>
        <div style={{ textAlign: 'right' }}>
          <Space size="small">
            <Button type="primary" htmlType="submit">
              查询
            </Button>
            <Button
              onClick={() => {
                form.resetFields()
                setListData([]) // 是否可以直接将数据清空
              }}
            >
              清空
            </Button>
          </Space>
        </div>
      </Form>
      <div
        className="list"
        style={{
          textAlign: 'center',
          background: token.colorFillAlter,
          borderRadius: token.borderRadiusLG,
          marginTop: 16,
        }}
      >
        <Table size="small" columns={columns} dataSource={listData} />
      </div>
    </div>
  )
}
export default QualityList
